<template>
  <div>
    <span>
      <span class="limit-text">{{text}}</span>
      <span class="more"><slot name="more"></slot></span>
      <slot name="after"></slot>
    </span>
  </div>
</template>
 
<script>
export default {
  inheritAttrs: false,
  props: {
    height: Number,
    text: String,
    isLimitHeight: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  watch: {
    text () {
      this.init()
    },
    isLimitHeight () {
      this.init()
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
	  const that = this
      let title = that.$el
      let textDom = that.$el.querySelector('.limit-text')
      let more = that.$el.querySelector('.more')
      more.style.display = 'none'
      that.$nextTick(() => {
        if (that.isLimitHeight) {
          if (title.scrollHeight > that.height) {
            more.style.display = 'inline-block'
            let text = that.text
            let n = 1000
            while (title.scrollHeight > that.height && n > 0) {
              if (title.scrollHeight > that.height * 3) {
                textDom.innerText = text = text.substring(0, Math.floor(text.length / 2))
              } else {
                textDom.innerText = text = text.substring(0, text.length - 1)
              }
              n--
            }
          }
        } else {
          textDom.innerText = that.text
        }
      })
    }
  }
}
</script>
 
<style scoped>
</style>